<template>
  <div class="app-container">
    <!-- 搜索条件 -->
    <div class="filter-container">
      <el-row>
        <el-col :span="11">
          <el-row>
            <el-col :span="7">
              <el-input
                v-model="listQuery.keyword"
                placeholder="名称/编码"
                style="width: 200px;"
                class="filter-item"
              />
            </el-col>
            <el-col :span="7">
              <el-button
                class="filter-item"
                type="primary"
                icon="el-icon-search"
                @click="searchFrom"
              >{{ $t('table.search') }}</el-button>
              <el-button
                class="filter-item"
                type="primary"
                icon="el-icon-edit"
                @click="addButClick"
              >{{ $t('table.add') }}</el-button>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="2">
          <!--弹出添加框start-->
          <el-dialog
            :visible.sync="dialogFormVisible"
            :before-close="dialogCancle"
            title="添加分销商"
            width="850px"
          >
            <el-form
              ref="form"
              :inline="true"
              :model="form"
              :rules="rules"
              label-width="80px"
              class="demo-form-inline"
            >
              <el-input v-model="form.disId" style="display: none;" />
              <el-form-item label="名称" prop="disName">
                <el-input v-model="form.disName" style="width: 250px;" />
              </el-form-item>
              <el-form-item label="编码" prop="disNumber">
                <el-input v-model="form.disNumber" style="width: 250px;" />
              </el-form-item>
              <el-form-item label="联系人" prop="disContactName">
                <el-input v-model="form.disContactName" style="width: 250px;" />
              </el-form-item>
              <el-form-item label="联系方式" prop="disContactPhone">
                <el-input v-model="form.disContactPhone" style="width: 250px;" />
              </el-form-item>
              <el-form-item label="地址" prop="disAddress">
                <el-input v-model="form.disAddress" style="width: 250px;" />
              </el-form-item>
              <el-form-item label="发票抬头" prop="disTaxName">
                <el-input v-model="form.disTaxName" style="width: 250px;" />
              </el-form-item>
              <el-form-item label="税号" prop="disTaxNumber">
                <el-input v-model="form.disTaxNumber" style="width: 250px;" />
              </el-form-item>
              <el-form-item label="开户行" prop="disTaxBank">
                <el-input v-model="form.disTaxBank" style="width: 250px;" />
              </el-form-item>
              <el-form-item label="开户账号" prop="disTaxAccount">
                <el-input v-model="form.disTaxAccount" style="width: 250px;" />
              </el-form-item>
              <el-form-item label="开户地址" prop="disTaxAddress">
                <el-input v-model="form.disTaxAddress" style="width: 250px;" />
              </el-form-item>
              <el-form-item v-if="showPrise" label="合作商" prop="partnerId">
                <el-select
                  v-model="form.partnerId"
                  placeholder="请选择合作商"
                  filterable
                  style="width: 250px;"
                >
                  <el-option
                    v-for="partner in partnerList"
                    :label="partner.text"
                    :value="partner"
                    :key="partner.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="开户联系方式" prop="disTaxTelephone">
                <el-input v-model="form.disTaxTelephone" style="width: 250px;" />
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogCancle('form')">取 消</el-button>
              <el-button type="primary" @click="addDistributors">确 定</el-button>
            </div>
          </el-dialog>
          <!--弹出添加框end-->
        </el-col>
      </el-row>
    </div>

    <el-table
      v-loading="listLoading"
      :data="talelist"
      border
      highlight-current-row="true"
      style="width: 100%;"
    >
      <el-table-column fixed prop="disName" label="名称" width="150" />
      <el-table-column fixed prop="disNumber" label="编码" width="150" />
      <el-table-column fixed prop="partnerName" label="合作商" width="150" />
      <el-table-column prop="disContactName" label="联系人" width="100" />
      <el-table-column prop="disContactPhone" label="联系方式" width="120" />
      <el-table-column prop="disAddress" label="地址" width="160" />
      <el-table-column prop="disTaxName" label="发票抬头" width="140" />
      <el-table-column prop="disTaxNumber" label="税号" width="140" />
      <el-table-column prop="disTaxBank" label="开户行" width="100" />
      <el-table-column prop="disTaxAddress" label="开户地址" width="160" />
      <el-table-column prop="disTaxTelephone" label="开户联系方式" width="110" />
      <el-table-column prop="disId" label="操作" width="140">
        <template slot-scope="scope">
          <el-popover placement="center" width="0" trigger />
          <el-button
            slot="reference"
            type="primary"
            size="mini"
            @click="getMaterialDetails(scope.row)"
          >修改</el-button>
          <el-popover placement="center" width="0" trigger />
          <el-button slot="reference" type="primary" size="mini" @click="confirmEdit(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <div class="pagination-container">
      <el-pagination
        v-show="total>0"
        :current-page="listQuery.page"
        :page-sizes="[10,20,30, 50]"
        :page-size="listQuery.pageSize"
        :total="total"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
// getMaterialDetails,
import { fetchList, addDistributor, updateDetailByid } from '@/api/distributor'
// import { parseTime } from '@/utils'
import { getPartnerInfo } from '@/api/shipment'
export default {
  data() {
    return {
      disList: null,
      detailsList: null,
      partnerList: [],
      dialogFormVisible: false,
      showPrise: true,
      talelist: null,
      total: 1,
      listLoading: true,
      listQuery: {
        page: 1,
        pageSize: 10,
        keyword: null,
        starTime: null,
        endTime: null,
        time: null,
        pageNumber: null
      },
      form: {
        disName: null,
        disNumber: null,
        disContactName: null,
        disContactPhone: null,
        disAddress: null,
        partnerId: null,
        disTaxName: null,
        disTaxNumber: null,
        disTaxBank: null,
        disTaxAccount: null,
        disTaxAddress: null,
        disTaxTelephone: null
      },
      rules: {
        disName: [
          { required: true, message: '请填写分销商名称', trigger: 'blur' }
        ],
        disNumber: [
          { required: true, message: '请填写分销商编号', trigger: 'blur' }
        ],
        disContactName: [
          { required: true, message: '请填写分销商联系人', trigger: 'blur' }
        ],
        disContactPhone: [
          { required: true, message: '请填写分销商联系方式', trigger: 'blur' }
        ],
        disAddress: [
          { required: true, message: '请填写分销商地址', trigger: 'blur' }
        ],
        partnerId: [
          { required: true, message: '请选择合作商', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getList()
    this.getPartnerInfo()
  },
  methods: {
    dialogCancle(formName) {
      this.form = {}
      // this.$refs[formName].resetFields();
      this.dialogFormVisible = false
    },
    addButClick() {
      this.dialogFormVisible = true
      this.showPrise = true
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    },
    addDistributors() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          debugger
          var data = new FormData()
          data.append('disId', this.form.disId)
          data.append('disName', this.form.disName)
          data.append('disNumber', this.form.disNumber)
          if (this.showPrise === true) {
            data.append('partnerId', this.form.partnerId.value)
            data.append('partnerName', this.form.partnerId.text)
          }
          data.append('disContactName', this.form.disContactName)
          data.append('disContactPhone', this.form.disContactPhone)
          data.append('disAddress', this.form.disAddress)
          if (
            this.form.disTaxName !== 'undefined' &&
            this.form.disTaxName !== null
          ) {
            data.append('disTaxName', this.form.disTaxName)
          }
          if (
            this.form.disTaxNumber !== 'undefined' &&
            this.form.disTaxNumber !== null
          ) {
            data.append('disTaxNumber', this.form.disTaxNumber)
          }
          if (
            this.form.disTaxBank !== 'undefined' &&
            this.form.disTaxBank !== null
          ) {
            data.append('disTaxBank', this.form.disTaxBank)
          }
          if (
            this.form.disTaxAccount !== 'undefined' &&
            this.form.disTaxAccount !== null
          ) {
            data.append('disTaxAccount', this.form.disTaxAccount)
          }
          if (
            this.form.disTaxAddress !== 'undefined' &&
            this.form.disTaxAddress !== null
          ) {
            data.append('disTaxAddress', this.form.disTaxAddress)
          }
          if (
            this.form.disTaxTelephone !== 'undefined' &&
            this.form.disTaxTelephone !== null
          ) {
            data.append('disTaxTelephone', this.form.disTaxTelephone)
          }
          addDistributor(data)
            .then(response => {
              if (response.data.status === 'success') {
                if (
                  this.form.disId === 'undefined' ||
                  this.form.disId === '' ||
                  this.form.disId === null
                ) {
                  this.$message('添加成功！')
                } else {
                  this.$message('修改成功！')
                }
                this.dialogFormVisible = false
                this.getList()
                this.form = {}
              } else if (response.data.status === 'already') {
                this.$message('编码已存在！')
              } else {
                this.$message('操作失败！')
                this.form = {}
              }
            })
            .catch(error => {
              console.info(error)
              this.$message('操作失败！')
            })
        }
      })
    },
    confirmEdit(row) {
      var data = {
        disId: row.disId
      }
      updateDetailByid(data)
        .then(response => {
          if (response.data.status === 'ok') {
            if (
              this.total > 1 &&
              this.total % 2 !== 0 &&
              this.talelist.length === 1
            ) {
              this.listQuery.page = this.listQuery.page - 1
            }
            this.getList()
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          } else {
            this.$message({
              message: '删除失败',
              type: 'warning'
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    getMaterialDetails(row) {
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
      this.dialogFormVisible = true
      this.showPrise = false
      this.form.disId = row.disId
      this.form.disName = row.disName
      this.form.disNumber = row.disNumber
      this.form.disContactName = row.disContactName
      this.form.disContactPhone = row.disContactPhone
      this.form.disAddress = row.disAddress
      this.form.disTaxName = row.disTaxName
      this.form.disTaxNumber = row.disTaxNumber
      this.form.disTaxBank = row.disTaxBank
      this.form.disTaxAccount = row.disTaxAccount
      this.form.disTaxAddress = row.disTaxAddress
      this.form.disTaxTelephone = row.disTaxTelephone
    },
    getList() {
      debugger
      this.listLoading = true
      var vmthis = this
      this.listQuery.pageNumber =
        (this.listQuery.page - 1) * this.listQuery.pageSize
      fetchList(this.listQuery)
        .then(response => {
          if (response.data.status === 'success') {
            vmthis.total = response.data.data.total
            vmthis.talelist = response.data.data.list
            vmthis.listLoading = false
          }
        })
        .catch(error => {
          console.log(error)
          vmthis.listLoading = false
        })
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    searchFrom() {
      this.listQuery.pageNumber = 0
      this.getList()
    },
    cancelEdit(row) {
      row.edit = false
      this.$message({
        message: '取消成功',
        type: 'warning'
      })
    },
    getPartnerInfo(item) {
      // 查询合作商信息
      getPartnerInfo()
        .then(response => {
          if (response.data.status === 'ok') {
            this.partnerList = response.data.data
          } else {
            console.log('合作商加载失败！')
          }
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>
